<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<link rel="stylesheet" type="text/css" href="css/login.css" />
		 <link rel="stylesheet" href="css/head.css" />
		<script src="js/jquery-1.7.2.min.js"></script>
		<script src="layui/layui.js"></script>
	</head>

	<body>
	<div class="dvhead">
	<div class="dvlogo"><a href="index.html">你问我答</a></div>
		<div class="dvsearch">10秒钟<a href="register.html">注册</a>账号，找到你的同学</div>
	<div class="dvreg">
		已有账号，立即&nbsp;<a href="login.html">登录</a>
	</div>
</div>
		<section class="sec">
	<form id="registForm"  method="post">
		<div class="register-box">
			<label class="username_label">
				用 户 名
				<input maxlength="20" name="username" type="text"
					placeholder="您的用户名和登录名" />
			</label>
			<div class="tips">

			</div>
		</div>
		<div class="register-box">
			<label  class="other_label">
				设 置 密 码
				<input  type="password" name="password"
					placeholder="请输入密码" />
			</label>
			<div class="tips">

			</div>
		</div>
		<div class="register-box">
			<label  class="other_label">
				确 认 密 码
				<input  type="password" placeholder="请再次输入密码" />
			</label>
			<div class="tips">

			</div>
		</div>
		<div class="register-box">
			<label  class="other_label">
				验 证 码
				<input maxlength="20" type="text" id="inputCode" placeholder="请输入验证码" name="code" />
			</label>
			<span id="code"></span>
			<div class="tips">

			</div>
		</div>
		<div class="arguement">
			<input type="checkbox" id="read" />
			阅读并同意
			<a href="javascript:void(0)">《错题用户注册协议》</a>
			<a href="login.html">已有账号,立即登录</a>
			<div class="tips">
			</div>
		</div>
		<div class="submit_btn">
			<button type="button" id="submit_btn">
				立 即 注 册
			</button>
		</div>
	</form>
	</section>

<script>
	let code; //验证码
	function refreshCode(){
		//发起异步请求获取验证码
		$.get("/verifyCodes/regist?t=" + new Date().getTime(), function (data) {
			$("#code").text(data);
			code = data;
		})
	}
	refreshCode();
	//验证码
	$("#code").click(function () {
		refreshCode();
	})
	layui.use(['layer', 'form'], function(){
		var layer = layui.layer,form = layui.form;
		$("#submit_btn").click(function () {
			//验证码校验
			if($("#inputCode").val().toLowerCase()!= code.toLowerCase()){
				layer.msg("验证码错误~");
				return;
			}

			//阅读协议
			if(!$("#read").is(':checked')){
				layer.msg("请勾选协议");
				return;
			}

			/**
			 * data = {
			 *     code:200,
			 *     msg:xxx
			 * }
			 */
			$.post("/users/regist", $("#registForm").serialize(), function (data) {
				if(data.code == 200){
					window.location.href = "/login.html"
				}else{
					layer.msg(data.msg);
				}
			})
		})
	});
</script>

	</body>
</html>
